<template>
  <div>
    <div class="box">
      <div class="cartnav">购物车</div>
      <div class="nobox" v-if="!incart">
        <div class="icon"></div>
        <p class="nomessage">购物车空空的，快去逛逛吧！</p>
        <div class="nobtn">
          <a @click="gologin">去逛逛</a>
        </div>
      </div>
      <div class="cartbox" v-if="incart">
        <div class="gooditem" v-for="(item,index) in goodlist " :key="item.good_id">
          <div class="check">
            <input
              type="checkbox"
              style="display:inline-block;"
              :name="item.name"
              v-model="item.check"
              :class="item.check ? 'select' : 'cancel'"
            />

            <!-- padding-bottom: 0.2564rem;padding-left:0.1026rem -->
          </div>
          <img class="goodimg" :src="item.src" @click="gogood(item.good_id)" />
          <div class="goodbox">
            <p class="txt">{{item.name}}</p>
            <p class="txt-price">
              ￥
              <span>{{item.allprice}}</span>
            </p>
          </div>
          <div class="btn-1">
            <button class="minus" @click="cut(index)">-</button>
            <input type="text" class="num" :value="item.num" />
            <button class="add" @click="add(index)">+</button>
          </div>
          <!-- <van-stepper v-model="item.num" input-width="30px" button-size="20px" /> -->
          <img class="del" @click="del(index)" />
        </div>
      </div>
      <div class="guesslike">
        <div class="liketop">
          <h2 class>猜你喜欢</h2>
        </div>
        <div class="likegood">
          <div class="one">
            <div class="img">
              <img src="https://img10.yiguoimg.com/d/items/2020/200508/9288740346472616_300.jpg" />
            </div>
            <div class="text">
              <h2 class="elli2">五芳斋五芳大肉粽(真空包装)280g(2只)</h2>
              <p>
                <strong class="red">
                  ￥
                  <b>20.80</b>
                </strong>
              </p>
            </div>
            <van-icon name="add-o" size="0.2222rem" color="#11b57c" />
          </div>
          <div class="one">
            <div class="img">
              <img src="http://img10.yiguoimg.com/d/items/2020/200704/9288740612417764_500.jpg" />
            </div>
            <div class="text">
              <h2 class="elli2">智利进口金奇异果4个装单果约75-90g</h2>
              <p>
                <strong class="red">
                  ￥
                  <b>28.00</b>
                </strong>
              </p>
            </div>
            <van-icon name="add-o" size="0.2222rem" color="#11b57c" />
          </div>
          <div class="one">
            <div class="img">
              <img src="http://img09.yiguoimg.com/d/items/2019/190401/9288737712514689_500.jpg" />
            </div>
            <div class="text">
              <h2 class="elli2">海南西州蜜瓜1个(约1.5kg/个)</h2>
              <p>
                <strong class="red">
                  ￥
                  <b>23.80</b>
                </strong>
              </p>
            </div>
            <van-icon name="add-o" size="0.2222rem" color="#11b57c" />
          </div>
        </div>
      </div>
    </div>
    <div class="pricebox">
      <div class="left">
        <div class="allcheck">
          <input type="checkbox" v-model="allcheck" :class="allcheck ? 'select' : 'cancel'" />
          <p>全选</p>
          <!-- <van-checkbox v-model="allcheck"  >全选</van-checkbox> -->
        </div>
        <div class="price">
          <p class="allprice">
            合计(不包含运费):
            <span>￥{{allprice}}</span>
          </p>
          <p class="disprice">以优惠:￥0.00</p>
        </div>
      </div>
      <div @click="clear()" class="right" :style="(active?'background:red':'background:#f4f4f4')">
        <p>去结算({{num}})</p>
      </div>
    </div>
    <app-bottomnav></app-bottomnav>
    <!-- 底部导航 -->
  </div>
</template>

<script>
// 引入底部导航
import goodApi from "@/api/goodApi";
import { getUser, getToken } from "@/utils/auth";
import appBottomnav from "@/components/bottomNav";
export default {
  data() {
    return {
      active: false,
      allprice: 0,
      result: [],
      goodlist: [],
      num: 0,
      loginstatus: {},
      cart: [],
      value: 1,
      incart: false
    };
  },
  // allprice: 0,

  components: { appBottomnav },
  watch: {
    goodlist: {
      deep: true,
      handler(newval) {
        let a = newval.filter(item => item.check == true);
        if (a.length) {
          this.active = true;
        } else {
          this.active = false;
        }
        this.num = 0;
        this.allprice = 0;
        a.forEach(item => {
          this.allprice = this.allprice * 1 + item.num * item.price;
          this.num += item.num;
        });
      }
    }
  },
  computed: {
    allcheck: {
      get() {
        //设置内容:二级复选框控制一级复选框
        return this.goodlist.every(item => item.check == true);
      },
      set(val) {
        //获取新值:一级复选框控制二级复选框
        // console.log(val);
        this.goodlist.forEach(item => {
          item.check = val;
        });
        console.log(111);
      }
    }

    // allprice1(){

    //   let a =  this.goodlist.filter(item => item.check == true)

    //   let allprice = 0
    //   a.forEach(item =>{
    //     allprice=allprice*1+ item.num*1+item.price*1

    //   })
    //   return allprice
  },
  methods: {
    clear() {
      this.$toast("结算成功");
      this.goodlist = [];
      if (this.goodlist.length == 0) {
        this.incart = false;
      }
    },
    //删除按钮
    async del(index) {
      let user = getUser();
      user = JSON.parse(user);
      let cart_id = this.goodlist[index].cart_id;

      this.goodlist.splice(index, 1);
      // console.log(this.goodlist.length == 0);
      if (this.goodlist.length == 0) {
        this.incart = false;
      }
      try {
        let p = await goodApi.delgood(cart_id);
        if (!p.data.flag) {
          console.log("删除失败");
        }
      } catch (error) {
        console.log(error);
      }
    },
    //  checkAll() {
    //    console.log(11);
    //    if(this.allcheck){
    //      this.allcheck = true
    //      this.$refs.checkboxGroup.toggleAll(true);

    //      }else{
    //      this.allcheck = false
    //      this.$refs.checkboxGroup.toggleAll(false);
    //    }

    // },
    //步进器减一事件
    cut(index) {
      if (this.goodlist[index].num > 1) {
        this.goodlist[index].num--;
        this.goodlist[index].allprice =
          this.goodlist[index].allprice - this.goodlist[index].price;
      }
      // this.fetchall()
    },
    //步进器加一事件
    add(index) {
      // console.log(this.cartList)
      this.goodlist[index].num++;
      this.goodlist[index].allprice =
        this.goodlist[index].allprice + this.goodlist[index].price;

      // this.fetchall()
    },
    //用token做登录判断
    async checktoken() {
      let token = getToken();
      let user = getUser();
      console.log(token, user);

      if (token && user) {
        try {
          //到时候修改接口方法
          let p = await goodApi.checktoken(token);

          if (p.data.flag) {
            this.loginstatus = { flag: true, code: 200 };
          } else {
            this.loginstatus = { flag: false, code: 301 };
          }
        } catch (error) {
          this.loginstatus = { flag: false, code: 302 };
        }
      } else {
        this.loginstatus = { flag: false, code: 301 };
      }
      // this.gologin();
    },
    gologin() {
      if (!this.loginstatus.flag) {
        this.$toast.fail("请登录");
        setTimeout(() => {
          this.$router.push("LRcom/login");
        }, 3000);
      }
    },
    //获取购物车
    async checkcart() {
      let user = getUser();
      if (user) {
        user = JSON.parse(user);
        console.log(user.userphone, 111);
        try {
          let p = await goodApi.cheackcart(user.userphone);

          if (p.data.flag) {
            this.cart = p.data.data;
            let id = [];
            this.cart.forEach(item => {
              let num = 0;
              let good = {};
              let bool = false;
              id.forEach((a, b) => {
                if (a == item.good_id) {
                  bool = true;
                  num = b;
                }
              });
              if (bool) {
                this.goodlist[num].num += item.num;
              } else {
                good.good_id = item.good_id;
                good.num = item.num;
                good.user_id = item.user_id;
                good.cart_id = item.cart_id;
                good.src = "";
                good.price = 0;
                good.name = "";
                good.message = "";
                good.allprice = 0;
                good.check = false;

                id.push(item.good_id);
                this.goodlist.push(good);
              }
            });
            this.gooditem();
          } else {
            console.log(p.data);
          }
          if (this.goodlist.length != 0) {
            this.incart = true;
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    gooditem() {
      this.goodlist.forEach((item, index) => {
        this.getgood(item.good_id, index);
        console.log(item.good_id);
      });
    },
    async getgood(good_id, index) {
      try {
        let p = await goodApi.good(good_id);
        if (p.data.flag) {
          console.log(111);
          console.log(p.data);
          this.goodlist[index].src = p.data.data[0].src.replace("[", "");
          console.log(this.goodlist[index].src);
          this.goodlist[index].src = this.goodlist[index].src.replace("]", "");
          this.goodlist[index].src = this.goodlist[index].src.split(",")[0];
          this.goodlist[index].name = p.data.data[0].name;
          this.goodlist[index].message = p.data.data[0].message;
          this.goodlist[index].price = p.data.data[0].price * 1;
          this.goodlist[index].price = parseInt(
            this.goodlist[index].price.toFixed(2)
          );

          // console.log(this.goodlist[index].price.toFixed(2))
          this.goodlist[index].allprice =
            1 * this.goodlist[index].num * this.goodlist[index].price;
        } else {
          console.log(222);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 点击跳转购物车
    gogood(good_id) {
      this.$router.push("/details?" + good_id);
    }
  },
  beforecreated() {},
  created() {
    this.checktoken();
    this.checkcart();
  }
};
</script>

<style lang="scss" scoped>
.van-icon-add-o {
  position: relative;
  top: 0;

  left: 63px;
}
.bottomNav {
  background: #fff;
}
//页面盒子
.box {
  width: 100%;
  height: 100%;
  margin-bottom: 0.7692rem;
  background: #fff;
}
.box .nobox {
  height: 2.6496rem;
  padding-bottom: 0.453rem;
  border-bottom: 0.0043rem solid #f4f4f4;
}
.box .nobox .icon {
  height: 0.9316rem !important;
  background: url("../../assets/img/nogood.png") no-repeat center;
  background-size: auto 100%;
}
.box .nobox .nomessage {
  font-size: 0.108rem;
  padding: 0.2564rem 0 0.1282rem;
}
.nobtn {
  height: 0.3267rem;
  font-size: 0.1368rem;
}
.nobtn a {
  margin: 0 auto;
  display: block;
  width: 1.1783rem;
  height: 0.3267rem;
  color: #11b57c;
  line-height: 0.3267rem;
  border-radius: 0.0427rem;
  border: 0.0043rem solid #11b57c;
}
.box .cartnav {
  border-bottom: 1px solid #f4f4f4;
  height: 0.4444rem;
  font-size: 0.1368rem;
  line-height: 0.444rem;
}

// 猜你喜欢

.guesslike .liketop {
  height: 0.4274rem;
  background: url("../../assets/img/bcliketopr.png") top left no-repeat;
  background-position: 50% 50%;
  background-position-x: 0.9829rem;
}
.guesslike .liketop h2 {
  display: block;
  line-height: 0.4274rem;
  background: url("../../assets/img/bcliketop.png") top left no-repeat;
  background-position: 50% 50%;
  background-position-x: 1.9231rem;
}
.likegood:after {
  content: "";
  height: 0;
  clear: both;
  overflow: hidden;
  display: block;
  visibility: hidden;
}
.guesslike .likegood .one {
  float: left;
  width: 1.5385rem;
  font-size: 0.1197rem;

  padding: 5px 16px;
}
.one .img {
  width: 1.2821rem;
  height: 1.2821rem;
}
.one .img img {
  width: 100%;
  height: 100%;
}
.one .elli2 {
  text-align: left;
  font-size: 0.1077rem;
}
.one p {
  text-align: left;
}
.one p strong {
  font-size: 0.1026rem;
}
.one p b {
  font-size: 0.1077rem;
  color: red;
}
/* 底部结算 */
.pricebox {
  position: fixed;
  bottom: 0.3419rem;
  width: 100%;
  height: 0.4274rem;
  background: #fff;
}
.pricebox .right {
  float: right;
}
.pricebox .left {
  float: left;
}
.price {
  padding: 5px 0;
  text-align: right;
  margin-left: 45px;
  float: left;
}
.allprice {
  font-size: 0.1026rem;
}
.allprice span {
  color: red;
  font: 0.1197rem;
}

.allcheck {
  width: 0.5128rem;
  height: 0.4274rem;
  padding-top: 0.0855rem;
  float: left;
  font-size: 0.1026rem;
  // background: pink;
  display: flex;
}
.allcheck input {
  width: 0.1709rem;
  height: 0.1709rem;
  appearance: none;
  border: 1px solid #cccccc;
  border-radius: 50%;
}
.allcheck p {
  margin-left: 0.0684rem;
}
.disprice {
  font-size: 0.1026rem;
}
.right {
  color: #fff;
  background: #f4f4f4;
  line-height: 0.4188rem;
  font-size: 0.1197rem;
  float: right;
  width: 0.9316rem;
  height: 0.4188rem;
}

//
.gooditem {
  position: relative;
  text-align: left;
  font-size: 16px;
  height: 0.8547rem;
  margin-bottom: 0.0855rem;
  display: flex;
  border-bottom: 1px solid #f4f4f4;
}
.gooditem .check {
  width: 0.3077rem;
  // height: 100%;
  // background: pink;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gooditem .check input {
  width: 0.1709rem;
  height: 0.1709rem;
  appearance: none;
  // border: 1px solid #cccccc;
  border-radius: 50%;
}
.select {
  background: url("//img06.yiguoimg.com/d/web/180508/01316/175209/check2.png")
    no-repeat;
  background-size: 100% 100%;
}
.cancel {
  background: url("//img06.yiguoimg.com/d/web/180119/01641/141347/check1.png")
    no-repeat;
  background-size: 100% 100%;
}
.gooditem .goodimg {
  display: inline-block;
  width: 0.6968rem;
  height: 0.6968rem;
  margin-top: 0.1026rem;
}
.goodbox {
  width: 1.7094rem;
  height: 100%;
  display: inline-block;
  margin-left: 0.0427rem;
}
.goodbox .txt {
  margin-top: 0.0855rem;
  width: 100%;
  height: 0.2821rem;
  // background: pink;
  font-size: 14px;
  color: #333;
}
.goodbox .txt-price {
  margin-top: 0.2564rem;
  color: #fb3d3d;
}
.btn-1 {
  position: absolute;
  bottom: 20px;
  right: 10px;
  height: 0.1709rem;
}
.del {
  position: absolute;
  top: 15px;
  right: 10px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("//img07.yiguoimg.com/d/web/180119/01642/141511/del.png")
    center right no-repeat;
  background-size: 100%;
}
//步进器
.minus {
  float: left;
  width: 20px;
  height: 20px;
  // background: url("../../assets/img/minusicon.png");
  // background-size: 100%;
  border: 1px solid #ccc;
  background: #ffffff;
  text-align: center;
}
.num {
  float: left;
  width: 26px;
  height: 20px;
  // margin: 0 1px;
  text-align: center;
  border: 1px solid #ccc;
}
.add {
  float: left;
  border: none;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  background: #ffffff;
  text-align: center;
}
//   background: url("../../assets/img/addicon.png");
//   background-size: 100%;
// }
</style>